<template>
  <div class="micro-map">
    <div id="map" class="micro-map"></div>
    <map-control :overLayerData="overLayerData"></map-control>
  </div>
</template>

<script>

import sgisMapBase from '@/utils/map/sgis.map.base.js'
import sgisLayerBase from '@/utils/map/sgis.layer.base.js'
import sgisRegionBase from '@/utils/map/sgis.region.base.js'
import Layer from '@/utils/map/lib/main.js'
import MapControl from '@/components/mapControl/index'
import data from './data/data.js'
import overLayersData from './overlayer.js'

export default {
  name: 'Layer',
  data () {
    return {
      color1 : '#409EFF',
      layers : [],
      selectlayer : '',
      map : '',
      overLayerData : overLayersData.data
    }
  },
  components : { MapControl },
  mounted () {
    this.loadMap() // 添加地图底图
  },
  methods: {
    loadMap () {
      sgisMapBase.init('map')
      sgisLayerBase.init(data.map.data)
      sgisRegionBase.regionCatalog.setRegionCatalogs(data.regioncatalogs.data)
    },
  /* *绘制图层边界 */
    addHLBoundary () {
      // sgisLayerBase.switchBaseLayer(1);
      Layer.hlLayer.addHLBoundary(
        data.regioninfos.data,
        'default',
        sgisMapBase.getMap()
      )
    },
    /* *获取所有图层 */
    initLayers () {
      this.layers = sgisLayerBase.getOverLayers()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.micro-map {
  width: 100%;
  height: 100%;
}
</style>
